<template>
  <div class="class-create-root">
    <!-- @closed 窗口关闭时结束时的回调   -->
    <el-dialog v-model="dialogStatus" :title="editform.display_class_name" width="600"
               @closed="closeDialog"
               style="text-align: center;font-weight:bold;"
    >
      <el-form :model="editform">
        <el-form-item label="班级名称" :label-width="formLabelWidth">
          <el-input v-model="editform.class_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级类型" :label-width="formLabelWidth">
          <el-select v-model="editform.class_type" placeholder="请选择班级类型">
            <el-option v-for = "(itemValue, itemKey) in CLASS_TYPE" :key="itemKey" :label="itemValue" :value="parseInt(itemKey)" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-select v-model="editform.course_id" placeholder="请选择班级课程">
            <el-option v-for = "(itemValue, itemKey) in courses" :key="itemKey" :label="itemValue.course_name" :value="itemValue.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="班主任" :label-width="formLabelWidth">
          <el-select v-model="editform.teacher_id" placeholder="请选择班主任老师">
            <el-option v-for = "(itemValue, itemKey) in teachers" :key="itemKey" :label="itemValue.name" :value="itemValue.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="讲师" :label-width="formLabelWidth">
          <el-select v-model="editform.lecturer_id" placeholder="请选择主讲老师">
            <el-option v-for = "(itemValue, itemKey) in lecturers" :key="itemKey" :label="itemValue.name" :value="itemValue.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="editform.start_date"
              type="date"
              placeholder="请选择开班时间"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYYMMDD"
          />
        </el-form-item>
        <el-form-item label="毕业时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="editform.end_date"
              type="date"
              placeholder="请选择班级毕业时间"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYYMMDD"
          />
        </el-form-item>
        <el-form-item label="班级状态" :label-width="formLabelWidth">
          <el-select v-model="editform.status" placeholder="请选择班级状态">
            <el-option v-for = "(itemValue, itemKey) in CLASS_STATUS" :key="itemKey" :label="itemValue" :value="parseInt(itemKey)" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="classUpdate">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {getCoursesAPI} from "@/network/course/course";
import {getEmployeesByPortAPI} from "@/network/employee/employee";
import {CLASS_STATUS, CLASS_TYPE} from "@/dict/dict-class-info";
import {updateClassAPI} from "@/network/class/class";
import {ElMessage} from "element-plus";
import eventBus from "@/plugins/event-bus";

const props = defineProps({
  editDialogFormVisible: Boolean,
  currentClassInfo:Object
})
const dialogStatus = ref(props.editDialogFormVisible)
const emit = defineEmits(['closeEditFormVisible'])
const closeDialog = ()=>{
  emit('closeEditFormVisible', false)
}

// 监听父组件传递的 `dialogFormVisible` 变化
watch(() => props.editDialogFormVisible, (newValue) => {
  // 如果需要在变化时执行一些逻辑，可以在这里添加，这里只把关闭的值传进去，相当于状态值转一圈来控制对话框的打开和关闭
  dialogStatus.value = newValue;
});

const formLabelWidth = '70px'

const courses = ref([])
const teachers = ref([])
const lecturers = ref([])

onMounted(()=>{
  getCoursesAPI().then((res)=>{
    courses.value = res.data.data
  })

  getEmployeesByPortAPI(1).then((res)=>{
    teachers.value = res.data.data
  })

  getEmployeesByPortAPI(2).then((res)=>{
    lecturers.value = res.data.data
  })
})


let editform=ref(props.currentClassInfo)
// 这里必须要做值的监听，这样父组件值发生了变化，子组件值才会跟着变，要不然值不会改变
watch( () => props.currentClassInfo, (newValue)=>{
  // console.log(newValue)
  editform.value = newValue;
  editform.value.display_class_name = newValue.class_name // 头部显示的名字，这个初始化了就不能变了
})

// 日期控件大小设置
const size = "default";

let classInfoAPIData = ref({});
function classUpdate(){
  classInfoAPIData.value = editform.value
  if (classInfoAPIData.value.class_type === ""){
    ElMessage.error("班级类型不能为空")
    return
  }else{
      try {
        classInfoAPIData.value.class_type = Number(classInfoAPIData.value.class_type)
      }catch (e) {
        classInfoAPIData.value.class_type = 0;
      }
    }

  if (classInfoAPIData.value.course_id === ""){
    ElMessage.error("课程名称不能为空")
    return
  }else{
    try {
      classInfoAPIData.value.course_id = Number(classInfoAPIData.value.course_id)
    }catch (e) {
      classInfoAPIData.value.course_id = 0;
    }
  }

  if(classInfoAPIData.value.teacher_id === ""){
    ElMessage.error("班主任不能为空")
    return
  }else{
    try {
      classInfoAPIData.value.teacher_id = Number(classInfoAPIData.value.teacher_id)
    }catch (e) {
      classInfoAPIData.value.teacher_id = 0;
    }
  }
  if(classInfoAPIData.value.lecturer_id === ""){
    ElMessage.error("讲师不能为空")
    return
  }else{
    try {
      classInfoAPIData.value.lecturer_id = Number(classInfoAPIData.value.lecturer_id)
    }catch (e) {
      classInfoAPIData.value.lecturer_id = 0;
    }
  }
  classInfoAPIData.value.id = editform.value.id
  classInfoAPIData.value.status = editform.value.status

  updateClassAPI(classInfoAPIData.value).then((res)=>{
    console.log(res)
    if(res.data.code==0){
      ElMessage.success("更新班级信息成功")
      closeDialog();
      //  添加时间总线的事件触发,然后在DefaultClassManager.vue中进行监听，重新拉一下班级列表
      eventBus.emit("update-classes-event",res.data.code)
    }else{
      ElMessage.error("更新班级信息失败")
      closeDialog();
    }

  })
}


</script>

<style scoped lang="less">

</style>